<template>
  <div class="setLink-links">
    <el-input
      placeholder="请添加链接"
      v-model="settedLink"
      disabled
      clearable
      :title="settedLink"
    >
      <div slot="append">
        <el-button :disabled="!settedLink" size="mini" @click="handleCopy">
          复制
        </el-button>
        <el-button :disabled="!settedLink" @click="handleOpen" size="mini">
          预览
        </el-button>
        <el-button :disabled="!settedLink || !qrcodeDataUrl">
          <el-popover placement="top" width="200" trigger="hover" @show="generateQRCode" :disabled="!qrcodeDataUrl">
            <span :disabled="!settedLink" slot="reference">
              扫码
            </span>
            <img v-if="qrcodeDataUrl" :src="qrcodeDataUrl" alt="QR Code" style="width: 100%;" />
            <span v-else style="text-align: center;">出错啦</span>
          </el-popover>
        </el-button>
      </div>
    </el-input>
  </div>
</template>
<script>
import { copy } from "@/util/tool";
import QRCode from "qrcode/lib/index";
export default {
  props: {
    settedLink: String,
  },
  data() {
    return {
      qrcodeDataUrl: null,
    };
  },
  watch: {
    settedLink(newValue, oldValue) {
      console.log(newValue);
      this.generateQRCode();
    },
  },
  methods: {
    handleOpen() {
      window.open(this.settedLink);
    },
    handleCopy() {
      copy(this.settedLink);
    },
    async generateQRCode() {
      if (this.settedLink) {
        try {
          const qrcodeDataUrl = await QRCode.toDataURL(this.settedLink);
          this.qrcodeDataUrl = qrcodeDataUrl;
        } catch (error) {
          console.error("Error generating QR Code:", error);
        }
      }
    },
  },
  mounted() {
    this.generateQRCode()
  }
};
</script>

<style lang="stylus">
.setLink-links {
  padding: 7px;
  cursor: text;
  font-family: Yu Gothic UI;
  font-size: 1rem;
  color: #003262;
  background: #fff;
  border: 1px solid #e4e7ed;
  // height: 118px !important;
  max-height: 118px;
  border-radius: 5px;

  // .el-input__inner {
  //   text-overflow: ellipsis;
  // }

  .el-input-group__append {
    overflow: hidden;
    
    button {
      font-family: initial;
      background-color: #F5F7FA !important;
      transition: 0.1s;
      color: #409EFF !important;
    }

    button:hover {
      color: #66b1ff !important;
    }
  }
}
</style>
